<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
        /* 常规reset动作 */
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        ul,
        ol,
        li {
            list-style-type: none;
        }

        #box {
            width: 800px;
            height: 600px;
            border: 1px solid black;
            margin: 50px auto;

            display: flex;
            flex-direction: column;
        }

        #box>ul {
            width: 100%;
            height: 60px;
            /* background-color: coral; */
            display: flex;
        }

        #box>ul>li {
            /* width: 100%; */
            flex-grow: 1;
            height: 100%;
            background-color: orange;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
        }

        #box>ul>li.active {
            background-color: darkorange;
        }

        #box>ol {
            width: 100%;
            /* height: 50px; */
            flex-grow: 1;
            background-color: burlywood;
            position: relative;
        }

        #box>ol>li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 50px;
        }

        #box>ol>li.active {
            display: flex;
        }
    </style>

</head>

<body>
    <div id="box">
        <ul id="ulTabs">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol id="olContents">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

    <!-- <script>
        const tabs = document.querySelectorAll("ul>li")
        const contents = document.querySelectorAll("ol>li")

        const clearActive = (...arrs) => {
            arrs.forEach(
                arr => {
                    for (let i = 0; i < arr.length; i++) {
                        arr[i].classList.remove("active")
                    }
                }
            )

        }

        /*  */
        tabs.forEach(
            (tab, index) => {
                tab.onclick = function (e) {
                    clearActive(tabs, contents)

                    this.classList.add("active")
                    contents[index].classList.add("active")
                }
            }
        )
    </script> -->

    <!-- OOP版标签切换：TabBox -->
    <script>
        class TabBox {
            constructor(domRoot) {
                // 初始化DOM元素
                this.initDom(domRoot)

                // 初始化事件监听器（交互）
                this.initEventListeners()
            }

            /* 初始化DOM元素 */
            initDom(domRoot) {
                /* 在DOM根元素中找出所有子元素 绑定到实例 */
                this.tabs = domRoot.querySelectorAll("ul>li")
                this.contents = domRoot.querySelectorAll("ol>li")
            }

            /* 初始化事件监听 */
            initEventListeners() {
                this.tabs.forEach(
                    (tab, index) => {
                        /* 为每一枚标签添加点击事件 */
                        tab.onclick = (e) => {

                            // 当前实例（this）切换到指定标签
                            this.switchTo(index)
                        }
                    }
                )
            }

            /* 将传入的【每个数组中的每个元素】都取消active样式 */
            static clearActiveClass(...elementArrs) {
                elementArrs.forEach(
                    elementArr => {
                        for (let i = 0; i < elementArr.length; i++) {
                            elementArr[i].classList.remove("active")
                        }
                    }
                )
            }

            /* 切换到指定标签 */
            switchTo(index) {
                console.log("switchTo", index);
                // 将所有的标签和内容全都点灭
                TabBox.clearActiveClass(this.tabs, this.contents)

                // 将指定序号的标签和内容点亮
                this.tabs[index].classList.add("active")
                this.contents[index].classList.add("active")
            }
        }
    </script>

    <!-- 业务逻辑 -->
    <script>
        // 找出根元素
        const box = document.querySelector("#box")

        // 创建tab切换的盒子
        const tb = new TabBox(box)

        // 访问TabBox的全部标签和内容
        // console.log(tb.tabs);
        // console.log(tb.contents);

        // 切换到指定标签
        // tb.switchTo(index)

        /* 轮播 */
        // let index = 0
        // setInterval(() => {
        //     index++
        //     index = index > 2 ? 0 : index

        //     tb.switchTo(index)
        // }, 1000);

    </script>

</body>

</html>